<template>
  <el-drawer :model-value="visible" :title="`关联设备（${roomName}）`" :size="mobile ? '100%' : '40%'" lock-scroll class="body-pd-clear" @close="handleClose">
    <DeviceList :room-id="roomId" style="margin: 0 20px" @associatedRoom="associatedRoom" @associatedPublic="associatedPublic" />
  </el-drawer>
</template>
<script setup name="AssociateDevice">
import useAppStore from '@/store/modules/app'
import DeviceList from './DeviceList.vue'

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  roomId: {
    type: [Number, String],
    default: ''
  },
  roomName: {
    type: [String],
    default: ''
  },
})

function associatedPublic() {
  emit("associatedPublic")
}

function associatedRoom() {
  emit("associatedRoom")
}

const mobile = computed(() => useAppStore().device === 'mobile')

function handleClose() {
  emit('cancel')
}
</script>

